<template>
  <el-main>
    欢迎{{userinfo.username}}登录
    <el-form :inline="true" :model="form1" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="form1.name" placeholder="请输入商品名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="form1.price1" placeholder="请输入开始价格"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="form1.price2" placeholder="请输入结束价格"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="loadpdf()">导出pdf</el-button>
    <el-button type="primary" @click="lookpdf()">预览pdf</el-button>
    <el-button type="primary" @click="add()">添加</el-button>

    <template>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="head"
            label="图片"
            
            width="180">
          <template slot-scope="scope">
            <img :src="'http://localhost:83/'+scope.row.head" width="70" height="70">
          </template>
        </el-table-column>

        <el-table-column
            prop="price"
            label="价格">
        </el-table-column>
        <el-table-column
            prop="cityname"
            label="产地">
        </el-table-column>
        <el-table-column
            prop="promotionname"
            label="促销">
        </el-table-column>
        <el-table-column
            prop="datetimes"
            label="创建时间">
        </el-table-column>
        <el-table-column

            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="xq(scope.row)">详情</el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="form1.pageNum"
          :page-size="form1.pageSize"
          layout="total, prev, pager, next"
          :total="form1.total">
      </el-pagination>
    </div>
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

         <el-upload
             class="avatar-uploader"
             action="http://localhost:86/file/upload"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload">
           <img v-if="form.head" :src="'http://localhost:83/'+form.head" height="70" width="70" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>


        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
    <el-form-item label="产地" prop="cityname"></el-form-item>
        <el-cascader
            v-model="cityids"
            :options="options"
            :props="{value:'id',label:'cityname'}"
            @change="handleChange"></el-cascader>






        <el-form-item label="促销" >

          <el-checkbox-group v-model="checkids" @change="aa">
            <el-checkbox v-for="item in proids" :label="item.pid">
              {{item.pname}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tj()">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="商品详情" :visible.sync="dialogFormVisibles">
      <el-form :model="form" >
        <el-form-item label="名称" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>


          <img v-if="form.qrcode" :src="form.qrcode" height="70" width="70" class="avatar">



        <el-form-item label="价格">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产地"></el-form-item>
        <el-cascader
            v-model="cityids"
            :options="options"
            :props="{value:'id',label:'cityname'}"
            @change="handleChange"></el-cascader>






        <el-form-item label="促销" >

          <el-checkbox-group v-model="checkids" @change="aa">
            <el-checkbox v-for="item in proids" :label="item.pid">
              {{item.pname}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tj()">确 定</el-button>
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      dialogFormVisibles:false,
      xqimg:'',
      xqprice:'',
      xqcity:'',
      xqpro:'',
      xqname:'',
      form:{
        proidss:[],
      },
      form1:{},
      userinfo:{},
      dialogFormVisible:false,
      cityids: [],
      options: [],
      proids:[],
      checkids:[],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },

        ],
        head: [
          { required: true, message: '请选择图片', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' },

        ],
        // cityname: [
        //   { required: true, message: '请选择产地', trigger: 'change' }
        // ],











        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
   list(){

     this.axios.get("http://localhost:83/commodity/list",{params:this.form1}).then(res=>{

       this.tableData=res.data.msgData.list;
       this.form1.pageNum=res.data.msgData.pageNum;
       this.form1.pageSize=res.data.msgData.pageSize;
       this.form1.total=res.data.msgData.total;

     })
   },
    xq(row){
     this.dialogFormVisibles=true;
     this.axios.post("http://localhost:83/commodity/getxq",{id:row.id}).then(res=>{
    this.cityids=[];
       this.form=res.data.msgData;
       this.checkids=res.data.msgData.proidss;
       this.form.qrcode=res.data.msgData.qrcode;
       this.cityids[0]=res.data.msgData.provinceid;
       this.cityids[1]=res.data.msgData.cityid;
       this.cityids[2]=res.data.msgData.countyid;
     })

    },
    tj(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.axios.post("http://localhost:83/commodity/addsave",this.form).then(res=>{
            if(res.data.flag){
              this.dialogFormVisible=false;
              this.$message.success("添加成功");
              this.list();
            }else{
              this.$message.error(res.data.msgInfo);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.form1.pageSize=pageSize;
      this.list();
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.form1.pageNum=pageNum;
      this.list();
    },
    onSubmit(){
     this.list();
    },
    loadpdf(){
     this.axios.get("http://localhost:83/commodity/pdf").then(res=>{
       if(res.data.flag){
         this.$message.success("导出成功");
       }else{
         this.$message.error("导出失败");
       }
     })
    },
    aa(val){

    this.form.proidss=val;


    },
    lookpdf(){
      this.axios.get("http://localhost:83/commodity/pdf").then(res=>{
        window.open("http://localhost:83/"+res.data.msgData);
      })
    },
    getuserinfo(){
     this.axios.get("http://localhost:83/commodity/getuserinfo").then(res=>{
       this.userinfo=res.data.msgData;
     })
    },
    add(){
    this.form={brand_this:0,head:""};
    this.cityids=[],
        this.checkids=[],
    this.dialogFormVisible=true;
    this.axios.get("http://localhost:83/commodity/getuuid").then(res=>{
      this.form.uuid=res.data.msgData;
    })
    },
    handleAvatarSuccess(res, file) {

      this.form.head = res;

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    getcity(){
     this.axios.get("http://localhost:83/commodity/getcityname").then(res=>{
       this.options=res.data.msgData;
     })
    },
    handleChange(value) {
      this.form.provinceid=value[0];
      this.form.cityid=value[1];
      this.form.countyid=value[2];
    },
    getproids(){
     this.axios.get("http://localhost:83/commodity/getproname").then(res=>{
       this.proids=res.data.msgData;
     })
    },

  },
    created() {
    this.list();
    this.getuserinfo();
    this.getcity();
    this.getproids();
    }
}
</script>